<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>详情</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/localpic/103.jpg}">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/assets/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/assets/css/font.awesome.css}">
    <!--ionicons css-->
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <!--7 stroke icons css-->
    <link rel="stylesheet" th:href="@{/assets/css/pe-icon-7-stroke.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</head>
<style>
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
        margin:0;
        padding:0;
        border:none;
        outline:none;
    }
    h1,h2,h3,h4,h5,h6 {
        font-size:100%;
    }
    address,cite,dfn,em,var {
        font-style:normal;
    }
    code,kbd,pre,samp {
        font-family:courier new,courier,monospace;
    }
    ul,ol {
        list-style:none;
    }
    a {
        text-decoration:none;
    }
    a:hover,a:visited,a:link,a:active {
        text-decoration:none;
    }
    sup {
        vertical-align:text-top;
    }
    sub {
        vertical-align:text-bottom;
    }
    legend {
        color:#000;
    }
    fieldset,img {
        border:0;
    }
    button,input,select,textarea {
        font-size:100%;
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    .clear {
        clear:both;
        float:none;
        height:0;
        overflow:hidden;
    }
    body {
        color:#333;
        font:12px/1.3 'Arial','Microsoft YaHei';
    }
    #pn {
        /*width:550px;*/
        height:auto;
        background:#fff;
        margin:0 auto;
        padding:20px;
    }
    .list0 {
        padding:20px 0;
        position:relative;
        border-top:1px solid #eee;
    }
    .head {
        width:60px;
        float:left;
    }
    .head img {
        width:60px;
        height:60px;
    }
    .close {
        width:20px;
        height:20px;
        position:absolute;
        top:0;
        right:0;
        color:#696e78;
        font-size:14px;
        text-align:center;
        line-height:20px;
    }
    .close:hover {
        color:#eb7350;
    }
    .content {
        width:450px;
        line-height:20px;
        font-size:14px;
        margin-left:70px;
    }
    .name {
        color:#eb7350;
    }
    .pic {
        margin:5px 0;
    }
    .good:after {
        clear:both;
        content:'';
        display:block;
        width:0;
        height:0;
        visibility:hidden;
    }
    .good {
        *zoom:1;
    }
    .date {
        float:left;
        color:#808080;
    }
    .good a {
        float:right;
        color:#808080;
    }
    .people {
        background:#F7F7F7;
        height:28px;
        line-height:28px;
        padding-left:10px;
        margin:5px 0;
    }
    .comment:after {
        clear:both;
        content:'';
        display:block;
        width:0;
        height:0;
        visibility:hidden;
    }
    .comment {
        *zoom:1;
        padding:10px 0;
        border-top:1px solid #eee;
    }
    .comment-left {
        width:30px;
        float:left;
        display:inline;
        margin-right:10px;
    }
    .comment-left img {
        width:30px;
        height:30px;
    }
    .comment-right {
        float:left;
        width:410px;
    }
    .comment-text {
        line-height:18px;
    }
    .comment-text span {
        color:#eb7350;
    }
    .comment-date {
        font-size:12px;
        line-height:14px;
        color:#ccc;
        position:relative;
    }
    .comment-zan {
        position:absolute;
        right:40px;
        bottom:0;
        color:#808080;
    }
    .comment-dele {
        position:absolute;
        right:0;
        bottom:0;
        color:#808080;
    }
    .hf:after {
        clear:both;
        content:'';
        display:block;
        width:0;
        height:0;
        visibility:hidden;
    }
    .hf {
        *zoom:1;
    }
    .hf-text {
        border:1px solid #eee;
        display:block;
        height:25px;
        width:438px;
        padding:5px;
        resize:none;
        color:#ccc;
        font-size:12px;
    }
    .hf-on .hf-text {
        height:60px;
        color:#333;
        border:1px solid #ff8140;
    }
    .hf-btn {
        float:right;
        width:65px;
        height:26px;
        background:#f7f7f7;
        color:#ccc;
        font-size:12px;
        display:none;
    }
    .hf-btn-on {
        background:#ff8140;
        color:#fff;
    }
    .hf-nub {
        float:right;
        padding:3px 5px;
        color:#666;
        display:none;
    }
    .hf-on .hf-btn {
        display:inline;
    }
    .hf-on .hf-nub {
        display:inline;
    }
</style>
<script>

    function addloadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    addloadEvent(b);

    function b() {
        var pn = document.getElementById("pn");
        var lists = pn.children;
        //删除当前节点
        function remove(node) {
            node.parentNode.removeChild(node);
        }
        //上面的点赞
        function praisebox(box, el) {
            //获取赞数量容器
            var praise = box.getElementsByClassName("people")[0];
            //获取容器当前total值
            var total = parseInt(praise.getAttribute("total"));
            //获取点击的innerHTML
            var txt = el.innerHTML;
            //创建一个新的total存储用
            var newtotal;
            //判断点击的文字内容
            if (txt == "赞") {
                //total值+1 因为我还没点击赞，所以要点击的时候就多了一个人 total+1
                newtotal = total + 1;
                //判断赞数量 把相应文字放到赞容器里
                praise.innerHTML = newtotal == 1 ? "我觉得很赞" : "我和" + total + "个人觉得很赞";
                el.innerHTML = "取消赞";
            } else {
                //反之total值-1
                newtotal = total - 1;
                praise.innerHTML = newtotal == 0 ? "" : newtotal + "个人觉得很赞";
                el.innerHTML = "赞";
            }
            //更新total值
            praise.setAttribute("total", newtotal);
            //如果没有人点赞容器隐藏
            praise.style.display = (newtotal == 0) ? "none" : "block";
        }
        //回复评论
        function reply(box) {
            //获取评论框
            var textarea = box.getElementsByTagName("textarea")[0];
            //获取包含所有评论的容器
            var comment = box.getElementsByClassName("comment-list")[0];
            //创建新的评论div
            var div = document.createElement("div");
            //赋类名
            div.className = "comment";
            //设置属性
            div.setAttribute("user", "self");
            //获取每条评论的innerHTML结构，每次只替换textarea的输入内容和 当前发送时间
            var html = '<div class="comment-left">' + '<img th:src="@{/picture/5.jpg}" alt=""/>' + '</div>' +
                '<div class="comment-right">' +
                '<div class="comment-text"><span>我：</span>' + textarea.value + '</div>' +
                '<div class="comment-date">' +
                getTime() +
                '<a class="comment-zan" href="javascript:;" total="0" my="0">赞</a>' +
                '<a class="comment-dele" href="javascript:;">删除</a>' +
                '</div>' +
                '</div>';
            //插入到新建的评论div
            div.innerHTML = html;
            //把新评论插入到评论列表
            comment.appendChild(div);
            //评论后初始化textarea输入框
            textarea.value = "评论…";
            textarea.parentNode.className = "hf";
        }
        //获取当前时间回复评论时调用
        function getTime() {
            var t = new Date();
            var y = t.getFullYear();
            var m = t.getMonth() + 1;
            var d = t.getDate();
            var h = t.getHours();
            var mi = t.getMinutes();
            m = m < 10 ? "0" + m : m;
            d = d < 10 ? "0" + d : d;
            h = h < 10 ? "0" + h : h;
            mi = mi < 10 ? "0" + mi : mi;
            return y + "-" + m + "-" + d + "" + h + ":" + mi;
        }
        //回复里点赞
        function praiseReply(el) {
            //获取当前total值 也就是所有点赞数量
            var total = parseInt(el.getAttribute("total"));
            //获取当前my值 我的点赞
            var my = parseInt(el.getAttribute("my"));
            //创建新的total
            var newtotal;
            //判断my=0就是我准备要点赞
            if (my == 0) {
                //我点了赞总数量就要+1
                newtotal = total + 1;
                //更新total值
                el.setAttribute("total", newtotal);
                //更新my值
                el.setAttribute("my", 1);
                //更新文字 就是我点了后 文字就是取消赞了
                el.innerHTML = newtotal + " 取消赞";
            } else {
                //反之-1
                newtotal = total - 1;
                el.setAttribute("total", newtotal);
                el.setAttribute("my", 0);
                el.innerHTML = (newtotal == 0) ? " 赞" : newtotal + " 赞";
            }
        }
        //操作回复
        function operateReply(el) {
            //每条评论
            var comment = el.parentNode.parentNode.parentNode;
            //整个状态
            var box = comment.parentNode.parentNode.parentNode;
            //评论框
            var textarea = box.getElementsByTagName("textarea")[0];
            //名字
            var user = comment.getElementsByClassName("user")[0];
            //点击的innerHTML
            var txt = el.innerHTML;
            //判断当前点击的是否为回复
            if (txt == "回复") {
                //评论框触发焦点事件 也就是变高
                textarea.onfocus();
                //内容变为回复+当前人的名字
                textarea.value = "回复" + user.innerHTML;
                //调用键盘事件
                textarea.onkeyup();
            } else {
                //否则就是删除节点
                remove(comment);
            }
        }

        //遍历所有状态消息
        for (var i = 0; i < lists.length; i++) {
            //全部事件代理
            lists[i].onclick = function(e) {
                //获取当前点击事件
                var e = e || window.event;
                var el = e.srcElement;
                if (!el) {
                    el = e.target; //兼容火狐
                }
                //判断点击的类名
                switch (el.className) {
                    //关闭整个状态
                    case "close":
                        remove(el.parentNode);
                        break;
                    //上面的点赞
                    case "dzan":
                        praisebox(el.parentNode.parentNode.parentNode, el);
                        break;
                    //回复评论
                    case "hf-btn hf-btn-on":
                        reply(el.parentNode.parentNode.parentNode);
                        break;
                    //每条评论中点赞
                    case "comment-zan":
                        praiseReply(el);
                        break;
                    case "comment-dele":
                        operateReply(el);
                        break;
                }
            }
            var textarea = lists[i].getElementsByClassName("hf-text")[0];
            //焦点事件
            textarea.onfocus = function() {
                this.parentNode.className = 'hf hf-on';
                this.value = this.value == '评论…' ? '' : this.value;
            }
            //失焦事件
            textarea.onblur = function() {
                if (this.value == '') {
                    this.parentNode.className = 'hf';
                    this.value = '评论…';
                }
            }
            //键盘事件
            textarea.onkeyup = function() {
                var len = this.value.length;
                var textParentNode = this.parentNode;
                var textBtn = textParentNode.children[1];
                var textNub = textParentNode.children[2];
                if (len == 0 /*|| len>100*/ ) {
                    textBtn.className = "hf-btn";
                } else {
                    textBtn.className = "hf-btn hf-btn-on";
                    /*this.style.color="#333"; */
                }
                textNub.innerHTML = len + "/100";
            }
        }
        //遍历结束

    }




</script>
<body>

<!--header area start-->

<!--offcanvas menu area start-->
<div class="off_canvars_overlay">

</div>
<!--<div th:insert="~{/index::menu}">-->

<!--</div>-->
<!--offcanvas menu area end-->

<header th:insert="~{/index::header}">
</header>
<!--header area end-->

<!--breadcrumbs area start-->
<div class="breadcrumbs_area breadcrumbs_bg" style="padding: 10px 0px">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb_content">
                    <ul>
                        <li><a th:href="@{/}">回到首页</a></li>
                        <li>愿望详情</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumbs area end-->

<!--blog body area start-->
<div class="blog_details">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-12">
                <!--blog grid area start-->
                <div class="blog_wrapper blog_wrapper_details">
                    <article class="single_blog">
                        <figure>
                            <div class="post_header">
                                <h3 class="post_title">[[${good.getProductName()}]]</h3>
                                <div class="blog_meta">
                                    <p><a href="#">[[${userName}]]</a> / 在: <a href="#">[[${good.getDate()}]]</a> </p>
                                </div>
                            </div>
                            <div class="blog_d_thumb">
                                <img th:src="${good.getPic()}" alt="" style="width: 400px;height: 300px">
                            </div>
                            <figcaption class="blog_content">
                                <div class="post_content">
                                    <p>[[${good.getDescription()}]]</p>
                                </div>
                                <div class="entry_content">
<!--                                    <div class="post_meta">-->
<!--                                        <span>Tags: </span>-->
<!--                                        <span><a href="#">, fashion</a></span>-->
<!--                                        <span><a href="#">, t-shirt</a></span>-->
<!--                                        <span><a href="#">, white</a></span>-->
<!--                                    </div>-->

                                    <div class="social_sharing">
                                        <p>分享:</p>
                                        <ul>
                                            <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
                                            <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
                                            <li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
                                            <li><a href="#" title="google+"><i class="fa fa-google-plus"></i></a></li>
                                            <li><a href="#" title="linkedin"><i class="fa fa-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </article>
<!--                    <div class="related_posts">-->
<!--                        <h3>相关博文</h3>-->
<!--                        <div class="row">-->
<!--                            <div class="col-lg-4 col-md-4 col-sm-6">-->
<!--                                <article class="single_related">-->
<!--                                    <figure>-->
<!--                                        <div class="related_thumb">-->
<!--                                            <a href="blog-details.html"><img src="assets/img/blog/blog1.jpg" alt=""></a>-->
<!--                                        </div>-->
<!--                                        <figcaption class="related_content">-->
<!--                                            <h4><a href="#">Post with Gallery</a></h4>-->
<!--                                            <div class="blog_meta">-->
<!--                                                <span class="author">By : <a href="#">admin</a> / </span>-->
<!--                                                <span class="meta_date"> April 11, 2019	</span>-->
<!--                                            </div>-->
<!--                                        </figcaption>-->
<!--                                    </figure>-->
<!--                                </article>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="comments_form">
                    <h3>写一条评论</h3>
                        <form th:action="@{/addComment}">
                            <input type="hidden" name="userId" th:value="${Id}">
                            <input type="hidden" name="blogId" th:value="${good.getId()}">
                            <textarea name="content" style="height: 60px;width: 500px" class="hf-text"
                                      placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                            <button type="submit" style="background-color: #89ffc1" class="button">确认评论</button>
                        </form>

                    </div>
                    <div class="comments_box" style="margin-bottom: 0px">
                        <div class="comment_list" style="margin-bottom: 0px">
                            <ul id="pn" >
                                <li class="list0" th:each="comment:${commentList}">
                                    <!--                                <a class="close" href="javascript:;">X</a>-->
                                    <div class="head"><img th:src="${photoMap.get(comment.getUserId())}" alt=""></div>
                                    <div class="content">
                                        <p class="text"><span class="name">[[${userNameMap.get(comment.getUserId())}]]:&nbsp</span>[[${comment.getContent()}]]</p>
                                        <!--                                    <div class="pic"><img src="http://www.sucainiu.com/themes/images/demo/500x300-3.png" alt=""></div>-->
                                        <div class="good"><span class="date">[[${comment.getCreateTime()}]]
<!--                                        </span><a class="dzan" href="javascript:;">赞</a></div>-->
<!--                                                                            <div class="people" total="2980">2980人觉得很赞</div>-->
                                        <div class="comment-list">
                                            <div class="comment" user="self" th:each="reply:${mapReply.get(comment.getCommentId())}">
                                                <!--                                            <div class="comment-left"><img src="http://www.sucainiu.com/themes/images/demo/500x300-2.png" alt=""></div>-->
                                                <div class="comment-right">
                                                    <div class="comment-text"><span class="user">[[${userNameMap.get(reply.getUserId())}]]:</span>[[${reply.getContent()}]]</div>
                                                    <div class="comment-date">[[${reply.getCreateTime()}]]
<!--                                                        <a class="comment-zan" href="javascript:;" total="23" my="1">23 取消赞</a> -->
                                                        <a class="comment-dele" href="javascript:;">回复</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hf">
                                            <form th:action="@{/addCommentReply}" method="post">
                                                <input type="hidden" name="blogId" th:value="${comment.getBlogId()}">
                                                <input type="hidden" name="commentId" th:value="${comment.getCommentId()}">
                                                <input type="hidden" name="userId" th:value="${Id}">
                                                <input type="hidden" name="replyUserId" th:value="${comment.getUserId()}">
                                            <textarea type="text" class="hf-text" autocomplete="off" maxlength="100" name="content">评论…</textarea>
                                            <button class="hf-btn">回复</button>
                                            </form>
                                            <span class="hf-nub">0/100</span>

                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>

                    </div>

                </div>
                <!--blog grid area start-->
            </div>
            <div class="col-lg-3 col-md-12">
                <div class="blog_sidebar_widget">
                    <div class="widget_list comments">
                        <div class="widget_title">
                            <h3>我要送给这个孩子</h3>
                        </div>
                        <div class="tag_widget">
                            <a class="button" th:href="@{/goods/toGive(gi=${good.getId()},fi=${Id})}">赠送</a>
                        </div>

                    </div>
<!--                    <div class="widget_list comments">-->
<!--                        <div class="widget_title">-->
<!--                            <h3>写感谢信</h3>-->
<!--                        </div>-->
<!--                        <div class="tag_widget">-->
<!--                            <a class="button" th:href="@{/goods/toGive(gi=${good.getId()},fi=${Id})}">发送</a>-->
<!--                        </div>-->

<!--                    </div>-->
                    <div class="widget_list widget_post" >
                        <div class="widget_title">
                            <h3>最新博文</h3>
                        </div>
                        <div class="post_wrapper" th:each="blog:${recentGoods}">
                            <div class="post_thumb">
                                <a th:href="@{/goods/good/}+${blog.getId()}"><img th:src="${blog.getPic()}" alt=""></a>
                            </div>
                            <div class="post_info">
                                <h4><a th:href="@{/goods/good/}+${blog.getId()}">[[${blog.getProductName()}]]</a></h4>
                                <span>[[${blog.getDate()}]]</span>
                            </div>
                        </div>
                    </div>
<!--                    <div class="widget_list widget_categories">-->
<!--                        <div class="widget_title">-->
<!--                            <h3>Categories</h3>-->
<!--                        </div>-->
<!--                        <ul>-->
<!--                            <li><a href="#">Audio</a></li>-->
<!--                            <li><a href="#">Company</a></li>-->
<!--                            <li><a href="#">Gallery</a></li>-->
<!--                            <li><a href="#">Image</a></li>-->
<!--                            <li><a href="#">Other</a></li>-->
<!--                            <li><a href="#">Travel</a></li>-->
<!--                        </ul>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--blog section area end-->

<!--footer area start-->
<footer th:replace="~{/index::footer}"></footer>
<!--footer area end-->


<!-- JS
  ============================================ -->
<!--jquery min js-->
<script th:src="@{/assets/js/vendor/jquery-3.5.0.min.js}"></script>
<!--popper min js-->
<script th:src="@{/assets/js/popper.js}"></script>
<!--bootstrap min js-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--owl carousel min js-->
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<!--slick min js-->
<script th:src="@{/assets/js/slick.min.js}"></script>
<!--magnific popup min js-->
<script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
<!--jquery countdown min js-->
<script th:src="@{/assets/js/jquery.countdown.js}"></script>
<!--jquery ui min js-->
<script th:src="@{/assets/js/jquery.ui.js}"></script>
<!--jquery elevatezoom min js-->
<script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
<!--isotope packaged min js-->
<script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<!-- Plugins JS -->
<script th:src="@{/assets/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>




</body>

</html>